<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>金贵银业</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="http://www.zhaojinyin.cn/mobile/resource/css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="http://www.zhaojinyin.cn/mobile/resource/css/app.css" />
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="http://www.zhaojinyin.cn/mobile/resource/css/zhaojinyin_index.css" />
    <link href="http://www.zhaojinyin.cn/mobile/resource/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <style>
        .title {
            margin: 20px 15px 10px;
            color: #6d6d72;
            font-size: 15px;
        }
    </style>
</head>

<body style="padding-bottom: 150px;">

<div class="mui-bar mui-bar-nav" style="height: 45px;">

    <!--
        时间：2016-03-24
        描述：右边按钮
    -->
    <a class="mui-icon mui-pull-right right-btn"><span class="mui-badge" style="display: none;">36</span></a>
    <!--
        时间：2016-03-24
        描述：中间搜索放大镜
    -->
    <a class="fandajin-btn" style="float:left;margin-left: 10px;"></a>
    <input style="padding-left: 32px; width: 85%; margin-left: -30px; float: left;" type="text" placeholder="在此输入内容..." />
</div>

<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item1" href="/mobile">
        <span style="margin: -2px 0 2px 0;" class="mui-icon"><img style="width: 20px;" src="http://www.zhaojinyin.cn/mobile/resource/images/1_033.png"></span>
        <span class="mui-tab-label">首页</span>
    </a>

    <a class="mui-tab-item1 mui-active" href="/mobile/index.php?act=goods_class">
        <span class="mui-icon "><img style="width: 20px;" src="http://www.zhaojinyin.cn/mobile/resource/images/index_1151.jpg"></span>
        <span class="mui-tab-label">分类</span>
    </a>

    <a class="mui-tab-item1" href="/mobile/index.php?act=shopcart">
        <span class="mui-icon "><img style="width: 20px;" src="http://www.zhaojinyin.cn/mobile/resource/images/gouwuche239.png"><span class="mui-badge" style="display: none">9</span></span>
        <span class="mui-tab-label">购物车</span>
    </a>

    <a class="mui-tab-item1" href="/mobile/index.php?act=member_index&op=member_index">
        <span style="margin: -2px 0 2px 0;" class="mui-icon"><img style="width: 20px;" src="http://www.zhaojinyin.cn/mobile/resource/images/1_055.png"></span>
        <span class="mui-tab-label">我</span>
    </a>
</nav>

<div class="mui-content mui-row mui-fullscreen mt45">
    <div class="mui-col-xs-3">
        <div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
            <a class="mui-control-item" href="#content0">推荐</a>
            <a class="mui-control-item" href="#content1">黄金</a>
            <a class="mui-control-item" href="#content2">白银</a>
            <a class="mui-control-item" href="#content3">铂金</a>
            <a class="mui-control-item" href="#content4">品牌</a>
        </div>
    </div>
    <div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;">
        <!--
            作者：569154771@qq.com
            时间：2016-03-28
            描述：/* * 推荐 */
        -->
        <div id="content0" class="mui-control-content">
            <div class="mui-table-view" style="padding:0 10px; float: left;">
                <img style="float: left;;" src="http://www.zhaojinyin.cn/mobile/resource/images/15.jpg" width="100%" />

                <p style="border-bottom: 1px solid #EEEEEE; float: left;width: 100%;line-height: 22px; margin-top: 6px;">
                    <label class="font_weight_bolder" style="border-bottom: 2px solid #BB9E77;padding-bottom: 3px;">常用分类</label>
                    <label id="listGoing_genduo" style="float: right;">更多></label>
                </p>
                <ul class="fenlei_list">
                    <li id="listGoing"><a href="http://www.zhaojinyin.cn/mobile/index.php?act=search&op=index&keyword=白银"><img src="http://www.zhaojinyin.cn/mobile/resource/images/04.png"></a>
                        <p>银条</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/05.png">
                        <p>银砖</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/06.png">
                        <p>银币</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/07.png">
                        <p>银元宝</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/08.png">
                        <p>银钞</p>
                    </li>
                </ul>&nbsp;

                <p style="border-bottom: 1px solid #EEEEEE; float: left;width: 100%;line-height: 22px; margin-top: 6px;">
                    <label class="font_weight_bolder" style="border-bottom: 2px solid #BB9E77;padding-bottom: 3px;">热门分类</label>
                    <label style="float: right;">更多></label>
                </p>
                <ul class="fenlei_list">
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/04.png">
                        <p>银条</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/05.png">
                        <p>银砖</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/06.png">
                        <p>银币</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/07.png">
                        <p>银元宝</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/08.png">
                        <p>银钞</p>
                    </li>
                </ul>&nbsp;
            </div>
        </div>
        <!--
            作者：569154771@qq.com
            时间：2016-03-28
            描述：/* * 黄金 */
        -->
        <div id="content1" class="mui-control-content">
            <div class="mui-table-view" style="padding:0 10px; float: left;">
                <img style="float: left;;" src="http://www.zhaojinyin.cn/mobile/resource/images/15.jpg" width="100%" />

                <p style="border-bottom: 1px solid #EEEEEE; float: left;width: 100%;line-height: 22px; margin-top: 6px;">
                    <label class="font_weight_bolder" style="border-bottom: 2px solid #BB9E77;padding-bottom: 3px;">投资</label>
                    <label style="float: right;">更多></label>
                </p>
                <ul class="fenlei_list">
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/04.png">
                        <p>银条</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/05.png">
                        <p>银砖</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/06.png">
                        <p>银币</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/07.png">
                        <p>银元宝</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/08.png">
                        <p>银钞</p>
                    </li>
                </ul>&nbsp;

                <p style="border-bottom: 1px solid #EEEEEE; float: left;width: 100%;line-height: 22px; margin-top: 6px;">
                    <label class="font_weight_bolder" style="border-bottom: 2px solid #BB9E77;padding-bottom: 3px;">投资</label>
                    <label style="float: right;">更多></label>
                </p>
                <ul class="fenlei_list">
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/04.png">
                        <p>银条</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/05.png">
                        <p>银砖</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/06.png">
                        <p>银币</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/07.png">
                        <p>银元宝</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/08.png">
                        <p>银钞</p>
                    </li>
                </ul>&nbsp;
            </div>
        </div>
        <!--
            作者：569154771@qq.com
            时间：2016-03-28
            描述：/* * 白银 */
        -->
        <div id="content2" class="mui-control-content">
            <div class="mui-table-view" style="padding:0 10px; float: left;">
                <img style="float: left;;" src="http://www.zhaojinyin.cn/mobile/resource/images/15.jpg" width="100%" />

                <p style="border-bottom: 1px solid #EEEEEE; float: left;width: 100%;line-height: 22px; margin-top: 6px;">
                    <label class="font_weight_bolder" style="border-bottom: 2px solid #BB9E77;padding-bottom: 3px;">投资</label>
                    <label style="float: right;">更多></label>
                </p>
                <ul class="fenlei_list">
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/04.png">
                        <p>银条</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/05.png">
                        <p>银砖</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/06.png">
                        <p>银币</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/07.png">
                        <p>银元宝</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/08.png">
                        <p>银钞</p>
                    </li>
                </ul>&nbsp;

                <p style="border-bottom: 1px solid #EEEEEE; float: left;width: 100%;line-height: 22px; margin-top: 6px;">
                    <label class="font_weight_bolder" style="border-bottom: 2px solid #BB9E77;padding-bottom: 3px;">投资</label>
                    <label style="float: right;">更多></label>
                </p>
                <ul class="fenlei_list">
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/04.png">
                        <p>银条</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/05.png">
                        <p>银砖</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/06.png">
                        <p>银币</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/07.png">
                        <p>银元宝</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/08.png">
                        <p>银钞</p>
                    </li>
                </ul>&nbsp;
            </div>
        </div>
        <!--
            作者：569154771@qq.com
            时间：2016-03-28
            描述：/* * 铂金 */
        -->
        <div id="content3" class="mui-control-content">
            <div class="mui-table-view" style="padding:0 10px; float: left;">
                <img style="float: left;;" src="http://www.zhaojinyin.cn/mobile/resource/images/15.jpg" width="100%" />

                <p style="border-bottom: 1px solid #EEEEEE; float: left;width: 100%;line-height: 22px; margin-top: 6px;">
                    <label class="font_weight_bolder" style="border-bottom: 2px solid #BB9E77;padding-bottom: 3px;">投资</label>
                    <label style="float: right;">更多></label>
                </p>
                <ul class="fenlei_list">
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/04.png">
                        <p>银条</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/05.png">
                        <p>银砖</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/06.png">
                        <p>银币</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/07.png">
                        <p>银元宝</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/08.png">
                        <p>银钞</p>
                    </li>
                </ul>&nbsp;

                <p style="border-bottom: 1px solid #EEEEEE; float: left;width: 100%;line-height: 22px; margin-top: 6px;">
                    <label class="font_weight_bolder" style="border-bottom: 2px solid #BB9E77;padding-bottom: 3px;">投资</label>
                    <label style="float: right;">更多></label>
                </p>
                <ul class="fenlei_list">
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/04.png">
                        <p>银条</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/05.png">
                        <p>银砖</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/06.png">
                        <p>银币</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/07.png">
                        <p>银元宝</p>
                    </li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/08.png">
                        <p>银钞</p>
                    </li>
                </ul>&nbsp;
            </div>
        </div>
        <!--
            作者：569154771@qq.com
            时间：2016-03-28
            描述：/* * 品牌 */
        -->
        <div id="content4" class="mui-control-content">
            <div class="mui-table-view" style="padding:0 10px; float: left;">
                <img style="float: left;;" src="http://www.zhaojinyin.cn/mobile/resource/images/36.png" width="100%" />

                <p style="height: 1px; width: 100%; float:left;">

                </p>

                <ul class="fenlei_list pinpai_login" style="">
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/30.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/31.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/32.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/33.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/34.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/35.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/30.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/31.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/32.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/33.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/34.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/35.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/30.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/31.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/32.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/33.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/34.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/35.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/30.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/31.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/32.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/33.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/34.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/35.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/30.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/31.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/32.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/33.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/34.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/35.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/30.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/31.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/32.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/33.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/34.png"></li>
                    <li><img src="http://www.zhaojinyin.cn/mobile/resource/images/35.png"></li>
                </ul>&nbsp;
            </div>
        </div>

    </div>
</div>
<script src="http://www.zhaojinyin.cn/mobile/resource/js/mui.min.js"></script>
<style>
    .mui-row.mui-fullscreen>[class*="mui-col-"] {
        height: 100%;
    }

    .mui-col-xs-3,
    .mui-control-content {
        overflow-y: auto;
        height: 100%;
    }

    .mui-segmented-control .mui-control-item {
        line-height: 50px;
        width: 100%;
    }

    .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
        background-color: #fff;
    }
</style>
<script>
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
    var controls = document.getElementById("segmentedControls");
    var contents = document.getElementById("segmentedControlContents");
    /*var html = [];
     var mycars = new Array("推荐", "黄金", "白银", "铂金", "品牌");
     var i = 0,
     j = 1,
     m = mycars.length, //左侧选项卡数量+1
     n = 6; //每个选项卡列表数量+1
     for (; i < m; i++) {
     html.push('<a class="mui-control-item" href="#content' + i + '">' + mycars[i] + '</a>');
     }
     controls.innerHTML = html.join('');
     html = [];
     for (i = 0; i < m; i++) {
     html.push('<div id="content' + i + '" class="mui-control-content"><ul class="mui-table-view">');
     for (j = 0; j < n; j++) {
     html.push('<li class="mui-table-view-cell">第' + i + '个选项卡子项-' + j + '</li>');
     }
     html.push('</ul></div>');
     }
     contents.innerHTML = html.join('');*/
    //默认选中第一个
    controls.querySelector('.mui-control-item').classList.add('mui-active');
    contents.querySelector('.mui-control-content').classList.add('mui-active');
    (function($, doc) {
        $.plusReady(function() {
            //列表
            doc.getElementById("listGoing").addEventListener('tap', function() {
                $.openWindow({
                    url: 'fenlei_list.html'
                });
            }, false);
            //更多
            doc.getElementById("listGoing_genduo").addEventListener('tap', function() {
                $.openWindow({
                    url: 'fenlei_list_genduo.html'
                });
            }, false);
        });
    }(mui, document));
</script>
</body>

</html>